<template>
  <!-- 告警管理 -->
  <div class="app-container table-flex-wrapper">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <div style="display:inline-block;width:calc(100% - 100px);vertical-align:top">
        <el-form-item label="">
          <selector type="sensorType" size="small" style="width: 160px" clearable placeholder="请选择传感器类型" v-model="queryParams.sensorTypeId"></selector>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker v-model="dateRange" size="small" style="width: 320px" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="queryParams.deviceName" placeholder="模糊搜索设备名称" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="queryParams.deviceNumber" placeholder="模糊搜索设备编号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" @click="handleQuery" type="primary">搜索</el-button>
          <el-button size="mini" @click="handleExport" type="primary">导出</el-button>
        </el-form-item>
      </div>
      <div v-if="backBtn" style="display:inline-block;vertical-align:top;padding-top:3px;">
        <el-button size="mini" @click="$router.back()">返回列表</el-button>
      </div>
    </el-form>

    <el-table size="mini" v-loading="loading" :data="operationList">
      <el-table-column show-overflow-tooltip prop="seq" label="序号" width="70" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="设备名称" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="sensorType" label="传感器类型" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="number" label="设备编号" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="lon" label="经度" width="100px" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="lat" label="纬度" width="100px" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="startTime" min-width="160" label="维修开始时间" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="endTime" min-width="160" label="维修结束时间" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="respo" label="操作人" align="center"></el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
  import {
    listRecord,
    exportBySensor
  } from '@/api/page/device.js';
  import selector from "@/views/components/selector";

  export default {
    name: "equipment",
    components: {
      selector
    },
    data() {
      return {
        backBtn: false,
        // 角色表格数据
        operationList: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          sensorTypeId: undefined,
          deviceName: undefined,
          deviceNumber: undefined
        },
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
        typeOptions: [],
        stateOptions: [],
        pickerOptions: {
          shortcuts: [{
              text: "最近一天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
		},
		// 导出加载框
        exportLoading: {
          lock: true,
          text: '正在导出文件，请稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        },
      };
    },
    created() {
      let self = this;
      var id = self.$route.query.id;
      var num = self.$route.query.num;
      if (id != undefined) {
        this.backBtn = true;
      }
      if (num != undefined) {
        this.queryParams.deviceNumber = num;
      } else {
        this.queryParams.deviceNumber = undefined;
      }
      self.getList();
    },
    methods: {
      /** 查询维修记录 */
      getList() {
        let self = this;
        listRecord(self.addDateRange(self.queryParams, self.dateRange)).then(response => {
          var data = response.rows;
          self.total = response.total;
          self.loading = true;
          self.operationList = [];
          for (var i = 0; i < data.length; i++) {
            var record = data[i];
            var sensor = record.sensor;
            var device = sensor.device;
            var sensorType = sensor.sensorType;
            var point = device.point;
            self.operationList.push({
              seq: record.repairRecordId,
              name: device.deviceName,
              sensorType: sensorType.typeName,
              number: device.number,
              pointName: point.pointName,
              startTime: self.handleTimeFarmat(record.startTime),
              endTime: record.endTime,
              sensorState: device.state,
              respo: record.respo,
              lon: point.lon,
              lat: point.lat
            });
          }
          self.loading = false;
        }).catch((error)=> {
          self.loading = false;
          console.log(error);
        });
      },
      // 表单重置
      reset() {
        if (this.$refs.tree != undefined) {
          this.$refs.tree.setCheckedKeys([]);
        }
        this.form = {
          roleId: undefined,
          roleName: undefined,
          roleKey: undefined,
          roleSort: 0,
          status: "0",
          menuIds: [],
          deptIds: [],
          remark: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      statusFormater(row, column) {
        let i = this.$refs.statusSelector.getItem(row.status);
        return (i && i.label) || "";
      },
      /** 导出操作 */
      handleExport() {
		    let self = this;
        let loading = undefined;
        const queryParams = self.queryParams;
        self.$confirm("是否确认导出所有数据?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(function() {
			      loading = self.$loading(self.exportLoading);
            return exportBySensor(queryParams);
          })
          .then(response => {
			      self.download(response.msg);
			      loading.close();
          })
          .catch(function() {
			      if (loading!=undefined) {
              loading.close();
            }
		      });
      },
      //时间格式处理
      handleTimeFarmat(val) {
        return val.substring(0, 10) + " " + val.substring(11, 19);
      }
    }
  };
</script>
<style lang="scss">
  .el-table--group,
  .el-table--border,
  .el-table th.is-leaf,
  .el-table--border th,
  .el-table td,
  .el-table--border th,
  .el-table--border td {
    border: 0px;
  }

  // 去掉table内部线条
  .el-table--border tr,
  td {
    border-bottom: 1px solid rgb(223, 230, 236) !important;
  }

  .el-table__header-wrapper th:nth-last-of-type(9) {
    border: 0px !important;
  }

  .select1 {
    width: 180px;
    height: 32px;
  }

  .el-table::before {
    // 去掉table最下面的边框线
    height: 0;
  }

  .el-table {
    // 去掉table最右边的边框线
    position: static;
  }

  .green {
    color: rgb(20, 210, 20);
  }

  .el-table_1_column_12_column_13>.cell {
    color: #409eff;
  }

  .el-table_1_column_12_column_14>.cell {
    color: #e6a23c;
  }

  .el-table_1_column_12_column_15>.cell {
    color: #f56c6c;
  }
</style>
